<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=100%, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://teachedu.oss-cn-beijing.aliyuncs.com/public/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="https://teachedu.oss-cn-beijing.aliyuncs.com/public/swiper/css/animate.min.css">
    <link rel="stylesheet" href="https://teachedu.oss-cn-beijing.aliyuncs.com/public/css/photo.css">
    <script src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/js/jquery-2.1.1.min.js"></script>
    <script src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/js/vue.min.js"></script>
    <script src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/swiper/js/swiper.min.js"></script>
    <script src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/swiper/js/swiper.animate.min.js"></script>
    <title>${name}的时光相册</title>
    <style>
        .template1 .layout1{
            background: url('https://teachedu.oss-cn-beijing.aliyuncs.com/public/images/photoA_1_kx.jpg') center center no-repeat;
            background-size: 100% 100%
        }

        .template1 .layout2{
            background: url('https://teachedu.oss-cn-beijing.aliyuncs.com/public/images/photoA_2_kx.jpg') center center no-repeat;
            background-size: 100% 100%
        }

        .template2 .layout1 .photoBox{
            background: url('https://teachedu.oss-cn-beijing.aliyuncs.com/public/images/photoB_frame1_kx.png') center center no-repeat;
            background-size: 100% 100%;
        }
        
        .template2 .layout1 .photoBox .imgBox{
            position: absolute;
            top: 46%;
            height: 32%;
            width: 52%;
            left: 20%;
            transform: rotate(2deg);

        }

        .template3 .layout1{
            background: url('https://teachedu.oss-cn-beijing.aliyuncs.com/public/images/photoC_1_kx.jpg') center center no-repeat;
            background-size: 100% 100%;
        }

    </style>
</head>
<body style="margin:0;" :style="bgsound">
    <div id="app" :style="appStyle">
        <span class="music" :class="{'rotate':playMusic}" @click="musicSwitch()" id="musicControl" v-if="photos.bgmEnable"><img src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/musicIcon.png"/></span>
        <div class="swiper-container swiper-no-swiping" style="width:100%;height:100%;overflow:hidden">
            <div class="swiper-wrapper" :class="photos.template">
                <div class="swiper-slide" :class="meta.layout" v-for="(meta,index) in photos.metas">
                    <h1 v-if="meta.layout === 'layout1'"  class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                        <img :src="'https://teachedu.oss-cn-beijing.aliyuncs.com/public/photo_' + photos.template + '_title.png'"/>
                        <p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">{{photos.title}}</p>
                    </h1>
                    <div class="photoBox ani" v-if="meta.layout === 'layout1'" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                        <div class="imgBox" :style="{backgroundImage:'url('+meta.imgs[0]+')'}"></div>
                    </div>
                    <p class="welcome" v-if="meta.layout === 'layout1'"  class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">{{photos.welcome}}</p>
                    <div class="photoBox1 ani" v-if="meta.layout != 'layout1'"  :swiper-animate-effect="meta.layout === 'layout2' ? 'zoomIn' : 'rollIn'" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
                        <span v-if="photos.template === 'template1' && meta.layout === 'layout2'"><img src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/photoA_clip.png"/></span>
                        <div  class="imgBox" :style="{backgroundImage:'url('+meta.imgs[0]+')'}"></div>
                    </div>
                    <div class="photoBox2 ani"  :swiper-animate-effect="meta.layout === 'layout2' ? 'zoomIn' : 'rollIn'" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
                        <span v-if="photos.template === 'template1' && meta.layout === 'layout2'"><img src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/photoA_clip.png"/></span>
                        <span v-if="photos.template === 'template2' && meta.layout === 'layout2'"><img src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/photoB_flower.png"/></span>
                        <div class="imgBox" :style="{backgroundImage:'url('+meta.imgs[1]+')'}"></div>
                    </div>
                    <span v-if="index === (photos.metas.length - 1)" class="replay ani"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" @click="replay()">再一次</span>
                </div>
            </div>   
        </div>
    </div>
</body>

<script>
    var mySwiper = null;
    let _height = document.body.scrollHeight;
    let _width = document.body.scrollWidth;
    
     // vue实例
     var app = new Vue({
        el:"#app",
        data:{
            bgmusic:null,
            playMusic:true,
            appStyle:{
                height: window.screen.availHeight  + 'px',
                width:window.screen.availWidth  + 'px',
                overflow:'hidden'
            },
            effect:'slide',
            autoDuration:1,
            photos : ${albumMeta}
        },
        mounted() {
            const that = this;
            //画面切换
            if(this.photos.bgm){
                this.bgmusic = new Audio();
                this.bgmusic.src = this.photos.bgm
                this.bgmusic.preload = 'auto';
                this.bgmusic.loop = true;
                this.bgmusic.load()
                this.bgmusic.addEventListener("canplay", function() {
                    that.bgmusic.play()
                },false);

                this.bgmusic.addEventListener("load", function() {
                    that.bgmusic.play()
                },false);

                 function forceSafariPlayAudio() {
                     that.bgmusic.load()
                     that.bgmusic.play(); // iOS 7/8 仅需要 play 一下
                }

                 that.bgmusic.addEventListener('play', function() {
                    // 当 audio 能够播放后, 移除这个事件
                    window.removeEventListener('touchstart', forceSafariPlayAudio, false);
                }, false);

                window.addEventListener('touchstart', forceSafariPlayAudio, false);
            }
            this.swiper();
        },
        beforeDestroy() {
            if(this.bgmusic){
                this.bgmusic.pause();
            }
        },
        methods: {
            swiper(){
                var that = this;
                this.effect = that.photos.metas[0].effect;
                this.autoDuration = that.photos.metas[0].autoDuration;
                mySwiper = new Swiper('.swiper-container',{
                    effect:that.effect, //支持slide,coverflow,fade,flip
                    loop:false,
                    autoplay:{
                        delay: that.autoDuration,//1秒切换一次,
                        // stopOnLastSlide: true, //切换到最后一个slide时停止自动切换
                        disableOnInteraction:false, //户操作swiper之后，是否禁止autoplay
                    },
                    on: {
                        init: function(){
                            swiperAnimateCache(this); //隐藏动画元素 
                            swiperAnimate(this); //初始化完成开始动画
                        }, 
                        slideChangeTransitionEnd: function(){
                            swiperAnimate(this); //每个slide切换结束时也运行当前slide动
                            // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展现一次，去除ani类名
                            let activeInd = this.activeIndex;//切换结束时，现在是第几个slide
                            let metas = that.photos.metas;
                            that.effect = that.photos.metas[activeInd].effect;
                            // this.params.effect = that.photos.metas[activeInd].effect;
                            mySwiper.params.autoplay.delay = parseInt(that.photos.metas[activeInd].autoDuration)
                            that.autoDuration = parseInt(that.photos.metas[activeInd].autoDuration);
                            if(activeInd === that.photos.metas.length -1){
                                mySwiper.autoplay.stop()
                            }else{
                                mySwiper.autoplay.start()
                            }
                        },
                    },
                    // observer:true,
                });
            },
            // 重新播放幻灯片
            replay(){
                mySwiper.slideTo(0,500,function(){
                    mySwiper.autoplay.start()
                })
            },
            //背景音乐切换
            musicSwitch(){
                if(this.bgmusic !== null){   
                    //检测播放是否已暂停.bgmusic.paused 在播放器播放时返回false.
                    if(this.bgmusic.paused){     
                        this.playMusic = true;            
                        this.bgmusic.play();// 这个就是播放  
                    }else{
                        this.playMusic = false; 
                        this.bgmusic.pause();// 这个就是暂停
                    }
                } 
            }
        },
    })
</script>
</html>